/* component */
import { RoleViewLeftPanel, RoleViewRightPanel, RoleManagementViewHeader } from '@src/modules/account/role/component'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* store */
import { 
  useStoreCurrentSelectRole, 
  useStoreInitData, 
  useStoreFetchAuthGroups, 
  useStoreAuthGroups, 
  useStoreFetchRoleTree, 
  useStoreRoleCurrentProduct 
} from '@src/modules/account/role/store/hooks'
/* scss */
import '@src/modules/account/role/index.scss'
/* vue */
import { ComponentInstance, computed, defineComponent, onBeforeMount, ref, watch } from 'vue'
/* util */
import { getRootWindow } from '@src/util/dom'
import { isCustomerServiceCloudProductAndBusinessServiceCloudProduct, useProductLine } from '@shb-lib/tenant'

export type RoleManagementViewProps = {
  
}

export interface RoleManagementViewSetupState {
  
}

export enum RoleManagementViewEventEnum {
  Input = 'input'
}

export type RoleManagementViewEmitsOptions = {
  input: () => void;
}

export type RoleManagementViewInstance = ComponentInstance & RoleManagementViewSetupState
export type RoleManagementViewVM = RoleManagementViewSetupState & RoleManagementViewProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleManagementView,
  emits: [RoleManagementViewEventEnum.Input],
  setup(props: RoleManagementViewProps, { slots, emit }) {
    
    const { initData } = useStoreInitData()
    
    // 是否设置默认角色
    const isSetDefaultRole = true
    
    const fetchRoleTree = useStoreFetchRoleTree(isSetDefaultRole)
    const fetchAuthGroups = useStoreFetchAuthGroups()
    
    const { currentSelectRole } = useStoreCurrentSelectRole()
    const { currentProduct, setCurrentProduct } = useStoreRoleCurrentProduct()
    const { currentProductLine } = useProductLine()
    
    const { authGroups } = useStoreAuthGroups()
    
    const rootWindow = getRootWindow(window)
    const rootInstance = (rootWindow?.getGlobalRootInstance && rootWindow?.getGlobalRootInstance()) || {}
    
    // 是否有全部产品 (客服云 和 服务云) 用于控制样式
    const isHasAllProduct = computed(() => {
      return isCustomerServiceCloudProductAndBusinessServiceCloudProduct()
    })
    
    const isShowTrail = computed(() => {
      return rootInstance.isShowTrail
    })
    
    const classNames = computed(() => {
      return [
        ComponentNameEnum.RoleManagementView,
        isShowTrail.value ? 'role-management-view-trail' : ''
      ]
    })
    
    watch(currentSelectRole, () => {
      fetchAuthGroups()
    })
    
    onBeforeMount(() => {
      // 设置当前产品线的数据，然后请求角色的时候会根据当前产品线的数据来请求
      setCurrentProduct(currentProductLine.value)
      // 初始化数据, 会请求角色树列表
      fetchRoleTree()
    })
    
    return {
      initData,
      authGroups,
      classNames,
      isHasAllProduct,
      currentProduct
    }
  },
  computed: {
    /** 
     * @description 角色管理内容 class
    */
    roleManagementViewContentClassNames(): string[] {
      return [
        'role-management-view__content',
        this.isHasAllProduct ? 'role-management-view__content--has-all-product' : ''
      ]
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        
        {/* start 角色管理头部 */}
        <RoleManagementViewHeader />
        {/* end 角色管理头部 */}
        
        <div class={this.roleManagementViewContentClassNames}>
          <RoleViewLeftPanel />
          <RoleViewRightPanel />
        </div>
        
      </div>
    ) as any
  }
})
